<template>
  <div class="monitor bg-white page-content content" ref="monitor">
    <iframe :height="height" :src="ipAddress" frameborder="0"></iframe>
  </div>
</template>

<script>

export default {
  name: 'monitor',
  props: {
    ip: {
      type: String,
      default: ''
    }
  },
  computed: {
    ipAddress () {
      if (this.ip.startsWith('http')) {
        return this.ip
      } else {
        return `//${this.ip}/`
      }
    }
  },
  data () {
    return {
      height: 726
    }
  },
  mounted () {
    this.getFullHeight()
  },
  methods: {
    getFullHeight () {
      this.height = this.$refs.monitor.clientHeight
    }
  }
}
</script>

<style scoped lang="stylus">
  video{
    width 100% !important
    height calc(100vh - 95px) !important
    object-fit fill
  }
    >>>.video-js{
      width 100%
      height 100%
    }
  // 填满整个my_video的高度，设置video外层div高度，使之为容器高度
  #videoDiv>div{
    height calc(100vh - 95px) !important
    overflow hidden
  }
  .my_video{ // 视频播放器的容器
    width 100%
    height calc(100vh - 95px)
    background-color white
  }
</style>
